import React, { useState, useEffect, useContext } from "react";

import { Row, Col, Button, Popconfirm } from "antd";
import { Observer } from "mobx-react";
// import { Context } from "../../../index";
import { Context } from "../../../store/MyContext";

import Filters from "../lcx/compnents/Filters/Filters";
import List from "../lcx/compnents/Lists/List";
import UpdateModal from "../lcx/compnents/Modal/Modal";

import http from "../../../services/service";

import "./package.scss";

// const { Search } = Input;

// const suffix = (
//   <AudioOutlined
//     style={{
//       fontSize: 16,
//       color: "#1890ff",
//     }}
//   />
// );

// const onSearch = (value) => console.log(value);

export default function Package() {
  // const context = useContext(Context);
  const [selectedRowKeys, setselectedRowKeys] = useState([]);
  const [searchText, setsearchText] = useState("");
  const [tableData, setTableData] = useState([]);
  const [chinaCity, setchinaCity] = useState([]);
  const [alOrganization, setalOrganization] = useState([]);

  //体检项目所有数据获取
  const [allSingleSet, setAllSingleSet] = useState([]);

  useEffect(() => {
    getAllSets();
    getAllSingleSet();
    getCities();
    getAllOrganization();
  }, []);

  //获取所有体检单项目
  let getAllSingleSet = () => {
    http.get("/api1/getAllSingleSet").then((response) => {
      setAllSingleSet(response.data);
    });
  };

  //获取机构信息
  let getAllOrganization = () => {
    http.get("/api1/getAllOrganization").then((response) => {
      setalOrganization(response.data);
    });
  };

  //获取城市信息
  let getCities = () => {
    http.get("/api1/getCities").then((response) => {
      // console.log(111, response.data);
      setchinaCity(response.data);
    });
  };

  //获取数据
  let getAllSets = () => {
    //封装的axios请求的方法
    http.get("/api1/getAllPackages").then((response) => {
      setTableData(response.data);
    });
  };

  //删除数据
  let deleteItem = (id) => {
    http.post("/api1/deleteSet", { id }).then((response) => {
      getAllSets();
    });
  };

  //查询数据

  let getSearch = (searchValue) => {
    setsearchText(searchValue.user);
    console.log(888, searchValue.user);
    http.post("/api1/searchSet", { ...searchValue.user }).then((response) => {
      setTableData(response.data);
      // getAllSets();
    });
  };

  let selectOption = (props) => {
    // selectedRowKeys = props;
    setselectedRowKeys(props);
    // console.log(222, selectedRowKeys);
  };
  // console.log(11, selectedRowKeys);

  let onAdd = () => {
    console.log("dianjitianjia");
  };

  return (
    <Observer>
      {() => (
        <div className='bodyContainer'>
          {/* 搜索框组件 */}

          <Filters
            onAdd={onAdd}
            getSearch={getSearch}
            getAllSets={getAllSets}
          />
          {selectedRowKeys.length > 0 && (
            <Row style={{ marginBottom: 24, textAlign: "right", fontSize: 13 }}>
              <Col>
                {`Selected ${selectedRowKeys.length} items `}
                <Popconfirm
                  title='Are you sure delete these items?'
                  placement='left'
                  // onConfirm={this.handleDeleteItems}
                >
                  <Button type='primary' style={{ marginLeft: 8 }}>
                    Remove
                  </Button>
                </Popconfirm>
              </Col>
            </Row>
          )}
          {/* 表格组件 */}
          <List
            selectOption={selectOption}
            searchValue={searchText}
            tableData={tableData}
            deleteItem={deleteItem}
          />
          {/* 弹出框组件 */}
          <UpdateModal
            allSingleSet={allSingleSet}
            chinaCity={chinaCity}
            alOrganization={alOrganization}
          />
        </div>
      )}
    </Observer>
  );
}
